<template>
  <Layout>
    <el-form :rules="rules" :model="stuDormInfo" label-position="top">
      <el-form-item label="姓名">
        <el-input disabled v-model="Info.name"></el-input>
      </el-form-item>
      <el-form-item label="班级">
        <el-input disabled v-model="Info.className"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="p_phone">
        <el-input v-model="stuDormInfo.p_phone"  placeholder="请输入电话"></el-input>
      </el-form-item>
      <el-form-item label="宿舍">
        <el-input disabled style="width: 100rem; margin-left: 5rem" v-model="Info.ldmc"></el-input>
        <el-input disabled style="width: 100rem; margin-left: 5rem" v-model="stuDormInfo.floor"></el-input>
        <el-input disabled style="width: 100rem; margin-left: 5rem" v-model="stuDormInfo.dormNum"></el-input>
      </el-form-item>
      <el-form-item label="留宿时间" prop="start_time">
        <el-date-picker :disabled-date="disabledDate" :clearable="false" :editable="false"
          v-model="stuDormInfo.start_time" value-format="YYYY-MM-DD HH:mm" type="datetime"></el-date-picker>
        <p style="width: 60%; color: #606266">至</p>
        <el-date-picker :disabled-date="disabledDate" :clearable="false" :editable="false"
          v-model="stuDormInfo.end_time" value-format="YYYY-MM-DD HH:mm" type="datetime"></el-date-picker>
      </el-form-item>
      <el-form-item label="原因" prop="reason">
        <el-input placeholder="请输入留宿原因" maxlength="20" show-word-limit type="textarea" v-model="stuDormInfo.reason" />
      </el-form-item>
      <el-form-item>
        <el-checkbox label="家长审批" v-model="Info.state" :true-label="1" :false-label="0" :disabled="true" size="large" />
      </el-form-item>
      <el-form-item>
        <div style="
                        width: 100%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    ">
          <el-button style="width: 90%" size="large" type="primary" @click="onSubmit">立即申请</el-button>
        </div>
      </el-form-item>
    </el-form>
  </Layout>
</template>

<script setup>
import Layout from './component/Layout.vue';
import { ref } from 'vue';
import { reqDorm, reqStuDormInfo, reqDormitory } from '@/api/student';
import { useStudentStore } from '@/stores/modules/studentStore';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();
let dormList = [];
const studentStore = useStudentStore();
const Info = ref({
  name: studentStore.studentName,
  className: studentStore.className,
  ldmc: '',
  state: 1
});
const stuDormInfo = ref({
  building: '',
  detailedType: 8,
  dormNum: '',
  endTime: '',
  end_time: '',
  floor: '',
  leaveType: 4,
  p_phone: '',
  phone: '',
  reason: '',
  startTime: '',
  start_time: ''
});
const getDorm = async () => {
  const res = await reqDorm();
  dormList = res.dataList;
};
const getStuDormInfo = async () => {
  const res = await reqStuDormInfo(studentStore.studentNum);
  console.log(res);
  if (res.status === '200') {
    const data = res.dataList[0];
    stuDormInfo.value.building = data.buildingId;
    stuDormInfo.value.dormNum = data.fjh;
    stuDormInfo.value.floor = data.lc + '楼';
    console.log(stuDormInfo.value);
    Info.value.ldmc = data.ldmc;
  }
};

const disabledDate = date => {
  const time = new Date(date.getTime());
  if (date.getTime() < Date.now() - 1000 * 60 * 60 * 24 * 11) {
    return true;
  } else {
    if (time.getDay() === 5 || time.getDay() === 6) {
      return false;
    } else {
      return true;
    }
  }
};
const getDateformat = date => {
  const y = date.getFullYear();
  let m = date.getMonth() + 1;
  let d = date.getDate();
  let h = date.getHours();
  let mm = date.getMinutes();
  m = m < 10 ? '0' + m : m;
  d = d < 10 ? '0' + d : d;
  h = h < 10 ? '0' + h : h;
  mm = mm < 10 ? '0' + mm : mm;
  return y + '-' + m + '-' + d + '+' + h + '%3A' + mm;
};
const onSubmit = async () => {
  const start = new Date(stuDormInfo.value.start_time);
  const end = new Date(stuDormInfo.value.end_time);
  stuDormInfo.value.endTime = Date.parse(new Date(end));
  stuDormInfo.value.startTime = Date.parse(new Date(start));
  stuDormInfo.value.start_time = getDateformat(start);
  stuDormInfo.value.end_time = getDateformat(end);
  stuDormInfo.value.phone = stuDormInfo.value.p_phone;
  console.log(stuDormInfo.value);
  try {
    const result = await reqDormitory(stuDormInfo.value);
    if (result.status === '200') {
      console.log(result);
      ElMessage({
        type: 'success',
        message: '申请成功'
      });
      router.push('/student/index');
    }
  } catch (error) { }
};
getDorm();
getStuDormInfo();

const rules = ref({
  p_phone: [
    { required: true, message: '请输入家长电话', trigger: 'blur' },
    {
      min: 11,
      max: 11,
      message: '手机号的长度应为11个字符',
      trigger: 'blur'
    },
    {
      pattern: /^1[3-9]\d{9}$/, //手机号正则表达式
      message: '请输入正确的手机号',
      trigger: 'blur'
    }
  ],
  start_time: [
    { required: true, message: '请选择请假日期', trigger: 'change' }
  ],
  reason: [{ required: false, message: '请输入请假理由', trigger: 'blur' }]
});
</script>

<style lang="scss" scoped></style>
